<template>
  <view class="about-us">
    <image class="logo" src="/static/logo.png" />
    <view class="title">{{ aboutUsInfo.title }}</view>
    <view class="version-number" v-show="aboutUsInfo.version"
      >V{{ aboutUsInfo.version }}</view
    >
    <view class="rich-text-box">
      <rich-text :nodes="aboutUsInfo.content"></rich-text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { fetchAboutUs } from '@/api'
import { onLoad } from '@dcloudio/uni-app';

const aboutUsInfo = ref({
  title: '',
  version: '',
  content: ''
})
onLoad(()=>{
	console.log(1)
	fetchAboutUs().then(res => (aboutUsInfo.value = res))
	const accountInfo = uni.getAccountInfoSync()
	console.log(accountInfo)
	if(accountInfo.miniProgram){
		console.log(2)
		if(accountInfo.miniProgram.version){
			aboutUsInfo.value.version = accountInfo.miniProgram.version
		}
	}
})
</script>

<style scoped lang="scss">
.about-us {
  padding-top: 100rpx;
  padding-bottom: 100rpx;
  .logo {
    width: 120rpx;
    height: 106rpx;
    display: block;
    margin: auto;
  }
  .title {
    color: #333;
    font-weight: bold;
    text-align: center;
    padding-top: 20rpx;
  }
  .version-number {
    font-size: 24rpx;
    color: #999;
    text-align: center;
  }
  .rich-text-box {
    padding: 30rpx;
    text-align: center;
  }
}
</style>
